<!--
 * @Author: yao
 * @Date: 2024-10-31 15:34:35
 * @LastEditTime: 2024-11-19 11:55:55
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web\src\Layouts\Login.vue
-->
<template>
  <div class="login_page flex items-center">
    <div class=" flex justify-center items-stretch m-auto">
      <div class="bg-[#ffffffb3] p-10 w-[500px]">
        <div class="mb-10"><i style="font-size: 3.5rem;" class="pi pi-vimeo"></i></div>
        <div class="font-medium mb-4 text-xl">让智慧医疗触手可及</div>
        <div class="mb-10 text-opacity-100"
          style="color:  color-mix(in srgb,var(--p-surface-600) calc(100%),transparent);">做人民满意、客户信赖的卫生健康的信息化领军企业</div>
        <ul>
          <li v-for="item in des" class="flex items-start mb-6">
            <span class=" bg-primary w-8 h-8 rounded-lg justify-center flex items-center">
              <i class="pi pi-check" style="color: white"></i>
            </span>
            <div class="ml-4">
              <div class="font-medium text-lg">{{ item.title }}</div>
              <div style="color:  color-mix(in srgb,var(--p-surface-600) calc(100%),transparent);"
                class="text-opacity-100 leading-normal mt-2">
                {{ item.desc }}</div>
            </div>

          </li>
        </ul>
      </div>
      <div class="bg-white p-10  w-[500px]">
        <div class="font-bold mb-12 text-2xl leading-[3.5rem]">智慧入口</div>
        <Form v-slot="$form" :initialValues="form" :resolver @submit="onFormSubmit" class="flex flex-col gap-5 w-full ">
          <div class="flex flex-col gap-1 relative">
            <div class="flex items-center">
              <i style="font-size: 1.2rem;" class="pi pi-user mr-4"></i>
              <InputText class="w-full" name="account" type="text" placeholder="请输入账号" fluid />
            </div>
            <Message class="absolute top-11 right-0" size="small" v-if="$form.account?.invalid" severity="error"
              variant="simple">{{
                $form.account.error.message }}</Message>
          </div>
          <div class="flex flex-col gap-1 mt-3 relative">
            <div class="flex items-center">
              <i style="font-size: 1.2rem;" class="pi pi-lock mr-4"></i>
              <Password class="w-full" name="password" placeholder="请输入密码" :feedback="false" fluid toggle-mask />
            </div>
            <Message class="absolute top-11 right-0" size="small" v-if="$form.password?.invalid"
              v-show="$form.password?.invalid" severity="error" variant="simple">
              {{ $form.password.error?.message }}</Message>
          </div>
          <div class="flex flex-col gap-1 mt-3">
            <div class="flex justify-between items-center">
              <div class="w-full flex items-center relative">
                <i style="font-size: 1.2rem;" class="pi pi-id-card mr-4"></i>
                <InputText class="w-full" name="verifyCode" placeholder="请输入验证码" />
                <Message class="absolute top-11 right-0" size="small" v-if="$form.verifyCode?.invalid"
                  v-show="$form.verifyCode?.invalid" severity="error" variant="simple">
                  {{
                    $form.verifyCode.error?.message }}</Message>
              </div>
              <img :src="verifyCodPicUrl" @click="refreshCode" class="cursor-pointer" style="
                margin-left: 20px;
                width: 120px;
                height: 100%;
                background-color: beige;
              " />
            </div>
          </div>
          <Button :loading="loginLoading" class="mt-6" type="submit" severity="primary" icon="pi pi-user" label="登录" />
          <!-- <div class="flex justify-between items-center">
            <div>
              <Checkbox inputId="ingredient1" name="pizza" value="Cheese" />
              <label for="ingredient1"> 记住我 </label>
            </div>
            <a class="cursor-pointer">忘记密码</a>
          </div> -->
          <!-- {{ $form }} -->
        </Form>
        <div style="color:color-mix(in srgb,var(--p-surface-600) 100%,transparent)"
          class="text-center mt-12 leading-normal text-opacity-100">没有账号？
          <a text-opacity-100 style="color:color-mix(in srgb,var(--p-primary-color) calc(100%),transparent)"
            class="font-medium cursor-pointer">前往注册</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { verifyCode } from '@/api/user';
import { encrypt } from '@/utils/crypto';
import { useUserStore } from '@/stores/modules/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()
const verifyCodPicUrl = ref<string>("");
const loginLoading = ref(false)
const des = ref([
  {
    title: '创新',
    desc: '作为一颗即将崛起的新兴公司，创业是我们的首要核心价值观。'
  },
  {
    title: '协作',
    desc: '作为一颗即将崛起的新兴公司，创业是我们的首要核心价值观。'
  },
  {
    title: '高效',
    desc: '作为一颗即将崛起的新兴公司，创业是我们的首要核心价值观。'
  }
])
onMounted(() => {
  getVerifyCode()
})
const getVerifyCode = () => {
  verifyCode().then(res => {
    if (res.success) {
      form.value.verifyKey = res.data.key
      verifyCodPicUrl.value = 'data:image/png;base64,' + res.data.image
    }
  })
}
const form = ref({
  account: '6000000087684068',
  password: '123456',
  verifyCode: '',
  verifyKey: ''
});
const refreshCode = () => {
  getVerifyCode();
}
const resolver = ({ values }) => {
  const errors: any = {};
  const rules: any = [
    { name: 'account', title: '账号' },
    { name: 'password', title: '密码' },
    { name: 'verifyCode', title: '验证码' }
  ]
  for (const rule of rules) {
    if (!values[rule.name]) {
      errors[rule.name] = [{ message: `${rule.title}不可为空！` }];
    }
  }
  return {
    errors
  };
};

const onFormSubmit = (data: any) => {
  if (data.valid) {
    loginLoading.value = true
    userStore.loginHandler({
      account: encrypt(data.states.account.value),
      password: encrypt(data.states.password.value),
      verifyCode: data.states.verifyCode.value,
      verifyKey: form.value.verifyKey,
    }).then(res => {
      router.push('/')
      loginLoading.value = false
    })
  }
};



</script>
<style scoped lang='scss'>
.login_page {
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/signin/signin-2.jpg);
}
</style>